<template>
	<view>
		<view v-if="list.length!=0">
			<view class="order" v-for="(item,i) in list" :key="item.id" >
				<view class="item" v-for="items in item.orderItemList" :key="items.id" >
					<view class="left">
						<image :src="items.productPic" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title u-line-2" @click="to(item.id)">{{items.productName}}</view>
						<view class="type"><text v-for="(attr,j) in items.productAttrArray" :key="j">{{attr.value}}{{item.productAttrArray.length-1>j?',':''}}</text></view>
						<view class="delivery-time" style="margin-bottom: 25rpx;">发货时间 付款后30天内发货</view>
						<tui-button  v-if="item.date&&JSON.stringify(items.omsOrderReturnApply) == '{}'" type="danger" plain width="160rpx" height="45rpx"
						 :size="26" shape="circle" @click="applyAfterSale(item.id,items.productId)">申请售后</tui-button>
						<view v-else>已申请售后</view>
					</view>

					<view class="right">
						<view class="price">
							￥{{items.realAmount}}
							<!-- 	<text class="decimal">.58</text> -->
						</view>
						<view class="number">x{{items.productQuantity}}</view>
					</view>
				</view>

				<view class="total">
					<!-- 	共2件商品  -->
					合计:
					<text class="total-price">
						￥{{item.totalAmount}}
						<!-- <text class="decimal">.58</text> -->
					</text>
				</view>


			</view>
			<!--加载loadding-->
			<tui-loadmore v-if="loadding"></tui-loadmore>
			<tui-nomore v-if="!pullUpOn" backgroundColor="#f2f2f2"></tui-nomore>
			<!--加载loadding-->
		</view>
		<view v-else class="zz">
			<tui-no-data :fixed="false" imgUrl="/static/img/toast/img_noorder_3x.png">您还没有相关订单</tui-no-data>
		</view>
		<!-- 提示框 -->
		<tui-toast ref="toast"></tui-toast>
		<failTimeout v-show="failTimeout"></failTimeout>
	</view>
</template>

<script>
	import OmsPortalOrderController from '../api/OmsPortalOrderController.js'
	export default {
		data() {
			return {
				failTimeout:false,
				pageNum: 0,
				list: [],
				loadding: false,
				pullUpOn: true,
				evaluate: false,
				delArray: {},
				totals: [],
			};
		},
		async created() {
			await this.rendering()
		},
		methods: {
			async rendering() {
				if (this.pullUpOn) {
					this.pageNum++;
					await OmsPortalOrderController.list(this.pageNum, 5, 3)
						.then((res) => {
							// 加载状态结束
							if (res.data.code == 200) {
								if (
									res.data.data.list != null &&
									res.data.data.list != "" &&
									res.data.data.list != "undefined"
								) {
									res.data.data.list.forEach((element) => {
										if (new Date(element.createTime).getTime() + 60 * 60 * 24 * 1000 * 20 >= new Date().getTime()) {
											element.date = true;
										} else {
											element.date = false;
										}
										this.list.push(element);
										let total = 0;
										element.orderItemList.forEach((e) => {
											total += e.productQuantity;
										});
										this.totals.push(total);
									});
									if (res.data.data.totalPage <= this.pageNum) {
										this.loadding = false;
										this.pullUpOn = false
									}
									
								}
							} else {
								this.$router.go(-1);
							}
						})
						.catch((res) => {
							if(err.errMsg=='request:fail timeout'){
								this.failTimeout=true
							}
						});
				}
			},
			to(id) {
				uni.navigateTo({
					url: '/pages/order/orderDetails?orderId=' + id
				})
			},
			applyAfterSale(orderId, productId) { //跳转商品评价
				uni.navigateTo({
					url: '/pages/afterSale/applyAfterSale?orderId=' + orderId + '&productId=' + productId
				})
			}
		},

	}
</script>
<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.zz {
		margin-top: 200rpx;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;



		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: flex-end;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
				margin-left: 20rpx;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}
</style>
